<div>
  <div class="modal-header">
    <div class="modal-title">
      <span>{{ l('EditRole') }} </span>
      <span *ngIf="role && role.isStatic">
        <span>(</span>
        <span style="color:red">{{l('SystemStatic')}}</span>
        <span>)</span>
      </span>
    </div>
  </div>

  <nz-spin [nzSpinning]="!role">
    <form nz-form
      #validateForm="ngForm"
      (ngSubmit)="save()"
      *ngIf="role">
      <!-- 角色名称 -->
      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <input nz-input
            name="name"
            #name="ngModel"
            [(ngModel)]="role.name"
            [placeholder]="l('Name')"
            [disabled]="role.isStatic"
            required />
          <nz-form-explain *ngIf="name.control.dirty && name.control.errors">
            <ng-container *ngIf="name.control.hasError('required')">{{
              l('CanNotNull')
              }}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 角色展示名称 -->
      <nz-form-item>
        <nz-form-control nzHasFeedback>
          <input nz-input
            name="displayName"
            #displayName="ngModel"
            [(ngModel)]="role.displayName"
            [placeholder]="l('DisplayName')"
            required />
          <nz-form-explain *ngIf="displayName.control.dirty && displayName.control.errors">
            <ng-container *ngIf="displayName.control.hasError('required')">{{
              l('CanNotNull')
              }}</ng-container>
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>

      <!-- 角色介绍 -->
      <nz-form-item>
        <nz-form-control>
          <input nz-input
            name="description"
            [(ngModel)]="role.description"
            [placeholder]="l('RoleDescription')" />
        </nz-form-control>
      </nz-form-item>

      <!-- 权限组 -->
      <nz-form-item>
        <nz-checkbox-group name="grantedPermissions"
          [(ngModel)]="permissionList"
          *ngIf="permissionList.length != 0"></nz-checkbox-group>
      </nz-form-item>

      <!-- 功能按钮 -->
      <div class="modal-footer">
        <button nz-button
          type="button"
          [disabled]="saving"
          (click)="close()">
          {{ l('Cancel') }}
        </button>
        <button nz-button
          [nzType]="'primary'"
          type="submit"
          [disabled]="!validateForm.valid || saving">
          {{ l('Save') }}
        </button>
      </div>
    </form>
  </nz-spin>
</div>
